import {
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    StepsForm,
} from '@ant-design/pro-components';
import {Modal} from 'antd';
import React, {useState, useEffect} from 'react';
import type {UserListItem} from '../data';
import {authorityList} from "@/pages/organization/user-list/service";

export type FormValueType = {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
} & Partial<UserListItem>;

export type UpdateFormProps = {
    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: FormValueType) => Promise<void>;
    updateModalVisible: boolean;
    values: Partial<UserListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
    const [current, setCurrent] = useState(0);
    return (
        <StepsForm
            stepsProps={{
                size: 'small',
            }}
            stepsFormRender={(dom, submitter) => {
                return (
                    <Modal
                        width={640}
                        bodyStyle={{
                            padding: '32px 40px 48px',
                        }}
                        destroyOnClose
                        title="用户信息编辑"
                        open={props.updateModalVisible}
                        footer={submitter}
                        onCancel={() => {
                            props.onCancel();
                        }}
                    >
                        {dom}
                    </Modal>
                );
            }}
            onFinish={props.onSubmit}
            current={current}
            onCurrentChange={(index) => setCurrent(index)}
        >
            <StepsForm.StepForm
                initialValues={{
                    username: props.values.username,
                    account: props.values.account,
                    phone: props.values.phone,
                    email: props.values.email,
                    authorityId: props.values.authority?.authorityId,
                    orgName: props.values.organization?.name,
                }}
                title="基本信息"
            >
                <ProFormText
                    name="orgName"
                    label="所属租户"
                    width="md"
                    fieldProps={{disabled: true}}
                />
                <ProFormText
                    name="account"
                    label="登录账号"
                    width="md"
                    fieldProps={{disabled: true}}
                />
                <ProFormText
                    name="username"
                    label="显示名"
                    width="md"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名称！',
                        },
                    ]}
                />
                <ProFormText
                    name="phone"
                    width="md"
                    label="手机号"
                    placeholder="请输入联系人手机号"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的手机号!',
                            len: 11,
                            pattern: /^1\d{10}$/,
                        },
                    ]}
                />
                <ProFormText
                    name="email"
                    width="md"
                    label="邮箱"
                    placeholder="请输入邮箱地址"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的邮箱地址！',
                            pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
                        },
                    ]}
                />
                <ProFormSelect
                    label="角色"
                    name="authorityId"
                    style={{width: 200}}
                    request={async () => {
                        const res = await authorityList({organizationId: ""});
                        return res.data.map((item) => ({
                            label: item.authorityName,
                            value: item.authorityId,
                        }));
                    }}
                    placeholder="请选择角色"
                    rules={[{required: true, message: '请选择角色'}]}
                />
            </StepsForm.StepForm>
            <StepsForm.StepForm
                initialValues={{
                    homePath: props.values.homePath,
                    loginShell: props.values.loginShell,
                }}
                title="远程登录配置"
            >
                <ProFormText
                    name="homePath"
                    width="md"
                    label="Home目录"
                />
                <ProFormText
                    name="loginShell"
                    width="md"
                    label="登录Shell"
                />
            </StepsForm.StepForm>
        </StepsForm>
    );
};

export default UpdateForm;
